<template>
  <SelectSearch @search="onSearch"></SelectSearch>
  <div id="mars3dContainer" style="width: 100%;height: 100%;"></div>
  <div class="loading" v-if="loading">{{ loadtext }}</div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { SelectSearch } from '../components'

const urlpath = ref('https://dev.wenwuyun.cn:8060/staticFiles/tiles/huangyanpei/tileset.json')
const loadtext = ref('正在拼命加载中...')
const loading = ref(false)

onMounted(() => {
  initMars3D()
})

let marsMap, tiles3dLayer

function initMars3D(callback) {
  let mapOptions = {
    basemaps: [{
      name: "天地图影像(EPSG:3857)",
      type: "tdt",
      layer: "img_d",
      key: mars3d.Token.tiandituArr,
      show: true
    }],
    scene: {
      //默认视角参数
      shadows: false, //是否启用日照阴影
      removeDblClick: true, //是否移除Cesium默认的双击事件

      //以下是Cesium.Viewer所支持的options【控件相关的写在另外的control属性中】
      sceneMode: 3, //3等价于Cesium.SceneMode.SCENE3D,

      //以下是Cesium.Scene对象相关参数
      showSun: false, //是否显示太阳
      showMoon: false, //是否显示月亮
      showSkyBox: false, //是否显示天空盒
      showSkyAtmosphere: false, //是否显示地球大气层外光圈
      fog: false, //是否启用雾化效果
      fxaa: false, //是否启用抗锯齿

      undergroundMode: true, // 地下模式
      //以下是Cesium.Globe对象相关参数
      globe: {
        show: false,
        depthTestAgainstTerrain: false, //是否启用深度监测
        // baseColor: '#546a53', //地球默认背景色
        showGroundAtmosphere: false, //是否在地球上绘制的地面大气
        enableLighting: false, //是否显示昼夜区域
      },
      //以下是Cesium.ScreenSpaceCameraController对象相关参数
      // cameraController: {
      //   zoomFactor: 3.0, //鼠标滚轮放大的步长参数
      //   minimumZoomDistance: 1, //地球放大的最小值（以米为单位）
      //   maximumZoomDistance: 50000000, //地球缩小的最大值（以米为单位）
      //   enableRotate: true, //2D和3D视图下，是否允许用户旋转相机
      //   enableTranslate: true, //2D和哥伦布视图下，是否允许用户平移地图
      //   enableTilt: true, // 3D和哥伦布视图下，是否允许用户倾斜相机
      //   enableZoom: true, // 是否允许 用户放大和缩小视图
      //   enableCollisionDetection: true, //是否允许 地形相机的碰撞检测
      // }
    }
  }
  marsMap = new mars3d.Map("mars3dContainer", mapOptions);
  console.log('初始化Mars3D');

  initMars3Dtiles(urlpath.value)

  if (callback) {
    console.log('初始化Mars3D后回调');
    callback(marsMap)
  }
}

function initMars3Dtiles(url) {
  // tilesOpt参数
  let tilesOpt = {
    url: url,
    maximumScreenSpaceError: 16,
    maximumMemoryUsage: 1024,
    // position: { alt: 海拔高度 },
    // center: { lat: 模型纬度, lng: 模型经度, alt: 模型海拔, heading: 偏转角, pitch: 俯仰角 },
    // modelMatrix: modelMatrix, // 四维矩阵用于配置模型参数
    flyTo: true,
  }
  tiles3dLayer = new mars3d.layer.TilesetLayer(tilesOpt)

  //绑定监听事件
  tiles3dLayer.on(mars3d.EventType.add, function (event) {
    console.log('1 add--->', event)
    loading.value = true
  })
  tiles3dLayer.on(mars3d.EventType.loadBefore, function (event) {
    console.log('2 loadBefore--->', event)
  })
  tiles3dLayer.on(mars3d.EventType.load, function (event) {
    console.log('3 load--->', event)
  })
  tiles3dLayer.on(mars3d.EventType.allTilesLoaded, function (event) {
    console.log('4 allTilesLoaded--->', event)
    loading.value = false
  })
  tiles3dLayer.on(mars3d.EventType.initialTilesLoaded, function (event) {
    console.log('5 initialTilesLoaded--->', event)
  })
  tiles3dLayer.on(mars3d.EventType.remove, function (event) {
    console.log('6 remove--->', event)
  })

  console.log('加载模型图层');
  marsMap.addLayer(tiles3dLayer)
}

function removeMars3Dtiles() {
  console.log('清除模型图层');
  marsMap.removeLayer(tiles3dLayer)
}


function onSearch(e) {
  removeMars3Dtiles()

  urlpath.value = e
  initMars3Dtiles(urlpath.value)
}

</script>

<style scoped>
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  z-index: 999;
  pointer-events: none;
}
</style>